<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有访问权限</title>
    <style>
        h1 {
            font-size: 15vmin;
            margin-bottom: 0;
        }
        h2 {
            font-size: 5vmin;
            margin-top: 0;
            margin-bottom: 40px;
        }
        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: white;
            align-items: center;
            justify-content: center;
            cursor: none;
            --mouseStartX: -64;
            --mouseStartY: -64;
            overflow: hidden;
        }
        #jail {
            position: relative;
            border: 2px solid gray;
            border-radius: 50%;
            width: 32px;
            height: 32px;
        }
        #spinner {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50%;
            top: 50%;
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-animation: 4s spin linear infinite;
            animation: 4s spin linear infinite;
        }
        body.seenMouse #spinner {
            display: block;
        }
        body.seenMouse #cursor {
            position: absolute;
            left: 12px;
            top: 8px;
            -webkit-animation: 2s dragMouse ease forwards;
            animation: 2s dragMouse ease forwards;
            width: 32px;
            height: 32px;
            background-image: url();
        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
            }
            100% {
                -webkit-transform: translate(-50%, -50%) rotate(0deg);
                transform: translate(-50%, -50%) rotate(0deg);
            }
        }
        @keyframes spin {
            0% {
                -webkit-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
            }
            100% {
                -webkit-transform: translate(-50%, -50%) rotate(0deg);
                transform: translate(-50%, -50%) rotate(0deg);
            }
        }
        @-webkit-keyframes dragMouse {
            0% {
                left: calc(var(--mouseX)*1px);
                top: calc(var(--mouseY)*1px);
            }
            100% {
                left: calc(var(--mouseX)/var(--width)*10px + 12px);
                top: calc(var(--mouseY)/var(--height)*10px + 8px);
            }
        }
        @keyframes dragMouse {
            0% {
                left: calc(var(--mouseX)*1px);
                top: calc(var(--mouseY)*1px);
            }
            100% {
                left: calc(var(--mouseX)/var(--width)*10px + 12px);
                top: calc(var(--mouseY)/var(--height)*10px + 8px);
            }
        }
    </style>
</head>
<body>
<h1>Forbidden!</h1>
<h2>Code 403</h2>
<div id="jail">
    <svg xmlns="https://www.w3.org/2000/svg" xmlns:xhtml="https://www.w3.org/1999/xhtml" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin" id="spinner">

        <defs>
            <path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001" />
        </defs>
        <text x="0" y="0" text-anchor="left" style="font-size:90pt;">
            <textPath xlink:href="#textPath" startOffset="0%">MOUSE JAIL</textPath>
            <textPath xlink:href="#textPath" startOffset="50%">MOUSE JAIL</textPath>
        </text>
    </svg>
    <div id="cursor"></div>
</div>
<script>
    var jail = document.getElementById('jail');

    document.addEventListener('mousemove', mouseUpdate, false);
    document.addEventListener('mouseenter', mouseUpdate, false);

    var seenMouse = false;

    function mouseUpdate(e) {
        var jailCoords = jail.getBoundingClientRect();
        var pageCoords = document.body.getBoundingClientRect();

        var x = e.pageX - jailCoords.left;
        var y = e.pageY - jailCoords.top;

        document.body.style.setProperty('--mouseX', x);
        document.body.style.setProperty('--mouseY', y);

        document.body.style.setProperty('--width', pageCoords.width);
        document.body.style.setProperty('--height', pageCoords.height);

        if (!seenMouse) {
            document.body.classList.add('seenMouse');
            seenMouse = true;
        }
    }
    function mouseLeft(e) {
        document.body.classList.remove('seenMouse');
        seenMouse = false;
    }

    document.addEventListener('mouseleave', mouseLeft, false);
</script>
</body>
</html>